<template>
  <yd-layout>
    <!-- 顶部导航 -->
    <shop-header slot="navbar" :id="storeId"></shop-header>

    <!-- tab栏 -->
    <w-tab class="m-shop-ct" :indexTab="curTab" @changePage="onChangeTab">
      <w-tab-panel label="首页" hash="1">
        <shop-floor :floors="storeFloorList" :storeId="storeId" v-if="curTab == 1 && storeFloorList.length"></shop-floor>
      </w-tab-panel>
      <w-tab-panel :label="nav.navigationName" :hash="nav.navigationName" v-for="(nav, index) in storeNavList" :key="index">
        <shop-list :lists="nav.goodsInfoList || []" v-if="curTab == nav.navigationName"></shop-list>
      </w-tab-panel>
    </w-tab>

    <shop-footer slot="bottom" :id="storeId"></shop-footer>
  </yd-layout>
</template>

<script>
  import ShopHeader from './header'
  import shopFooter from './footer'
  import ShopList from './list'
  import ShopFloor from './floor'
  import { apiShopIndex, apiShopIndexFloor } from 'js/api'
  
  export default {
    data() {
      return {
        curTab: '1',
        storeId: '',
        storeNavList: [],
        storeFloorList: []
      }
    },
    created() {
      this.storeId = this.$route.params.id + ''
      if (!this.storeId) {
        this.$toast('该店铺不存在，请重新查询', () => {
          this.$router.replace('/')
        })
        return
      }
      // 获取店铺首页导航
      apiShopIndex(this.storeId).then(data => {
        this.storeNavList = data.VisualNavigationList || []
      })
      // 获取店铺首页楼层
      apiShopIndexFloor(this.storeId).then(data => {
        this.storeFloorList = data.VisualFloorList || []
      })
    },
    methods: {
      onChangeTab(hash) {
        this.curTab = hash
      }
    },
    components: {
      ShopHeader,
      shopFooter,
      ShopList,
      ShopFloor
    }
  }
</script>

<style lang="scss">
  @import '../../scss/_flex.scss';
  @import '../../scss/_mixin.scss';
  .m-shop-ct {
  }
</style>